<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
import axios from "axios"
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute();
const $router = useRouter()

const deviceTotal = reactive([])
const dataFormat = (res) => { //添加设备大类名称及大类下的小设备id、名称、大类名称、短地址
    if (deviceTotal.length == 0) {
        deviceTotal.push({ 'name': res[0].productName, 'equipment': [] })
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) { break }
            else if (j == deviceTotal.length - 1) {
                deviceTotal.push({ 'name': res[i].productName, 'equipment': [] })
                break;
            }
        }
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) {
                deviceTotal[j].equipment.push({ deviceId: res[i].deviceId, deviceName: res[i].name, productName: res[i].productName, sadder: res[i].sadder })
            }
        }
    }
}

const twiceDataFormat = (respon) => {//添加小设备对应的房间
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            deviceTotal[i].equipment[j].room = "未知房间"
        }
    }
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++)
            for (let k = 0; k < respon.length; k++) {
                for (let z = 0; z < respon[k].deviceList.length; z++) {
                    if (respon[k].deviceList[z].deviceId == deviceTotal[i].equipment[j].deviceId) {
                        deviceTotal[i].equipment[j].room = respon[k].name;
                    }
                }
            }
    }
}

const thirdthDataFormat = (res) => {//添加小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (res[deviceTotal[j].equipment[k].sadder] != undefined) {
                deviceTotal[j].equipment[k].brightness = res[deviceTotal[j].equipment[k].sadder].brightness
                deviceTotal[j].equipment[k].humidity = res[deviceTotal[j].equipment[k].sadder].humidity
                deviceTotal[j].equipment[k].left = res[deviceTotal[j].equipment[k].sadder].left
                deviceTotal[j].equipment[k].right = res[deviceTotal[j].equipment[k].sadder].right
                deviceTotal[j].equipment[k].temperature = res[deviceTotal[j].equipment[k].sadder].temperature
                deviceTotal[j].equipment[k].lockState = res[deviceTotal[j].equipment[k].sadder].lockState
            }
        }
    }
}

const forthDataFormat = () => {//格式小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (deviceTotal[j].equipment[k].brightness != null) {
                for (let i = 0; i < deviceTotal[j].equipment[k].brightness.length; i += 2) {
                    switch (i) {
                        case 0:
                            deviceTotal[j].equipment[k].firstLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 2:
                            deviceTotal[j].equipment[k].secondLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 4:
                            deviceTotal[j].equipment[k].thirdLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 6:
                            deviceTotal[j].equipment[k].forthLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        default:
                            break;
                    }
                }
                if (deviceTotal[j].equipment[k].brightness == "00000000") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            } else if ((deviceTotal[j].equipment[k].left != null) && (deviceTotal[j].equipment[k].right != null)) {
                if ((deviceTotal[j].equipment[k].left == 100) && (deviceTotal[j].equipment[k].right == 100)) {//反向判断，窗帘100反而是关上
                    deviceTotal[j].equipment[k].status = 1
                } else {
                    deviceTotal[j].equipment[k].status = 0
                }
            } else if (deviceTotal[j].equipment[k].productName == "网关") {
                deviceTotal[j].equipment[k].status = 1
            } else if (deviceTotal[j].equipment[k].lockState != null) {
                if (deviceTotal[j].equipment[k].lockState == "00") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            }
        }
    }
}

const axiosDevice = () => {
    fetch("/api/getEndDeviceList ", {
        method: "GET",
    })
        .then(res => res.json())
        .then(res => {
            dataFormat(res)
            cardRequest.post("/room", {
                type: "getRoomList"
            }).then((respon) => {
                twiceDataFormat(respon.data.roomList)
                fetch("/api/getProperties ", {
                    method: "GET",
                })
                    .then(r => r.json())
                    .then(r => {
                        thirdthDataFormat(r)
                        forthDataFormat()
                    })
            })
        })
}
axiosDevice()

const scenario = reactive([])
const getScenario = () => {
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            for (let k = 0; k < scenario.length; k++){
                for (let p = 0; p < scenario[k].messageList.length; p++){
                    if (deviceTotal[i].equipment[j].sadder == (scenario[k].messageList[p].saddr.slice(0, 2) + scenario[k].messageList[p].saddr.slice(3, 5))) { 
                        scenario[k].messageList[p].deviceName = deviceTotal[i].equipment[j].deviceName
                        scenario[k].messageList[p].productName = deviceTotal[i].equipment[j].productName
                        scenario[k].messageList[p].deviceId = deviceTotal[i].equipment[j].deviceId
                    }
                }
            }
        }
    }
}
const cardRequest = axios.create({
    baseURL: 'api',
    timeout: 3000,
    withCredentials: true,
});
const getScenarioAxios = () => {
    cardRequest.post("/situation", {
        type: "getSituationList"
    }).then((res) => {
        scenario.push(...res.data.situationList)
        getScenario()
    })
}
getScenarioAxios()

const way = (val) => {
    switch (val) {
        case 0:
            return "无"
        case 1:
            return "回家"
        case 2:
            return "离家"
        case 3:
            return "回家、离家"
    }
}

const scenarioBus = (val) => {
    localStorage.setItem("scenarioName", JSON.stringify(val));
    $router.push({ name: "setscenario" });
}

const addScenario = () => {
    let isP = 1
    for (let i = 0; i < scenario.length; i++){
        if(scenario[i].name == "新场景") isP = 0
    }
    if (isP) {
        cardRequest.post("/situation", {
            "type": "addSituation",
            "name": "新场景",
            "auto": 0,
            "messageList": [{ "saddr": "1E FC", "dcode": "01", "rdata": "01 00 00" }],
        })
    }
}
</script>

<template>
  <body class="w-[100vw] h-[100vh] select-none">
    <header class="h-[5rem] w-full flex justify-between items-center">
        <h1 class="text-[#c77430] border-l-8 border-[#ffbf40] pl-[.5rem] ml-[1rem]">场景</h1>
    </header>
    <main class="w-full h-auto flex flex-col items-center justify-between">
        <box @click="addScenario()" class="hover:opacity-80 w-5/6 h-[3rem] mb-[.5rem] bg-gradient-to-r from-[#ffe259] to-[#ffa751] rounded-3xl flex justify-center items-center text-[#bf7130]">
            <icon><i class="iconfont mr-[1.5rem]">&#xe642;</i></icon>
            <text>创建场景</text>
        </box>
        <allcard class="w-[100vw] flex items-center justify-center flex-col h-[70vh]">
            <div class="overflow-auto flex items-center flex-col">
                <card class="w-[80vw] h-[9rem] bg-gradient-to-r from-[#ffe259] to-[#ffa751] opacity-90 rounded-xl flex flex-col my-[.5rem]" v-for="(item, index) in scenario" :key="index">
                    <incard @click="scenarioBus(item.name)" class="w-full h-[9rem] flex justify-between">
                        <text class="w-1/2 flex flex-col ml-[1rem] mt-[1rem] h-full">
                            <title class="flex text-[#bf7130] border-l-8 border-[#ffbf40] pl-[.5rem] font-bold text-[1.4rem]">{{ item.name }}</title>
                            <div class="w-full h-1/2 mt-[2rem] text-[#bf7130]">{{ "触发条件："+way(item.auto) }}</div>
                        </text>
                        <equipment class="flex h-full w-[40vw] items-center mx-[.5rem] flex-shrink-0 flex-wrap overflow-auto">
                            <div v-for="(item, index) in item.messageList" :key="index" class="w-[4rem] h-[4rem] flex flex-shrink-0 bg-[#ffffff] opacity-30 rounded-xl px-[.5rem] mx-[.5rem]">
                                <text class="flex text-[#bf7130] font-bold justify-center items-center">{{ item.productName }}</text>
                            </div>
                        </equipment>
                    </incard>
                </card>
            </div>
        </allcard>
    </main>
  </body>
</template>

<style>
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.woff2?t=1698973122571') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.woff?t=1698973122571') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.ttf?t=1698973122571') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:24px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>